<template>
	<view>
		<view class="top">
			<view class="topImage">
				<image src="../static/a5.png" @click="back" class="back"></image>
				<u-swiper mode="number" indicatorPos="topRight" imgMode="scaleToFill" :list="list" height="750">
				</u-swiper>
			</view>
			<view class="down">
				<view class="title omit2">
					{{info.pname}}
				</view>
				<view class="text">
          {{ info.describe }}
				</view>
				<view class="money">
					<view class="left">
						{{info.price}} <text>蜂钻</text>
					</view>
					<view class="right">
						<u-rate :disabled="true" inactiveColor="#FFF4CD" activeColor="#F7C82E" :count="star"
							:current="5"></u-rate>
					</view>
				</view>
				<view class="goods_name">
					{{info.price}} 蜂钻
				</view>
				<view class="setect">
					<view class="left">
						<view class="list">
							<view class="icon"></view>
						</view>
					</view>
					<view class="right">
						月销 200
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="title">
				<view class="icon"></view>
				<view class="name">
					商品详情
				</view>
			</view>
			<u-parse :html="info.content"></u-parse>
		</view>
		<view class="div"></view>
		<view class="bottom">
			<u-button v-if="showButton" :ripple="true" @click="pay=true,type=true" class="u-button" type="primary">加入购物车
			</u-button>
      <text class="text-box">
        合计
        <text class="box-pir">
          {{info.price}}
          <text class="number">蜂钻</text>
        </text>
      </text>
			<u-button :ripple="true" @click="pay=true,type=false"
				class="u-button" type="primary">立即购买
			</u-button>
		</view>
		<image src="../static/a3.png" @click="pay=true,type=true" class="showcar"></image>
		<u-popup v-model="pay" @close="type=false" mode="bottom">
			<view class="popup">
				<view class="up">
					<view class="list" @click="toPage('details')">
						<image v-if="JSON.stringify(goods)=='{}'" :src="img_pre+info.thumbnail" class="img"></image>
						<image v-else :src="goods.cover==''?img_pre+info.thumbnail:img_pre+goods.cover" class="img">
						</image>
						<view class="goods">
							<view class="name">
								{{info.pname}}
							</view>
							<view class="number">
								<view class="money" v-if="goods.price">
									<text>{{goods.price}}</text>蜂钻
								</view>
								<view class="money" v-else>
									<text>{{info.price}}</text>蜂钻
								</view>
								<u-number-box v-model="count" class="box" :min="1" :max="100"></u-number-box>
							</view>
						</view>
					</view>
				</view>
				<view class="down" v-for="(item,index) in info.attribute_list" :key="index">
					<view class="name">
						{{index}}
					</view>
					<view class="cont">
						<view class="list" :class="specs_arr[index]==a?'active':''" @click="getAttribute(index,a)"
							v-for="(a,b) in item" :key="b">
							{{a}}
						</view>
					</view>
				</view>
				<view class="buttom">
					<u-button v-if="type" @click="toPay" :ripple="true" class="u-button-car" type="primary">加入购物车
					</u-button>
					<u-button v-else @click="toPay" :ripple="true" class="u-button-pay" type="primary">立即购买</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					background: 'transparent'
				},
				pay: false,
				list: [{
					image: ''
				}],
				good_comment_list: [],
				bad_comment_list: [],
				comment: 1,
				pid: 0,
				info: {},
				html: "",
				type: false,
				showButton: false,
				specs_arr: {},
				count: 1,
				star: 5,
				jsonLength: 0,
				goods: {},
				use_score: 1,
				newSpecs_arr: {}
			}
		},
		onLoad(option) {
			than = this;
			if (option.use_score) {
				than.use_score = option.use_score
				than.type = false;
				than.showButton = false;
			}
			than.pid = option.pid
			var json = {};

			than.post("api/Product/detail", {
				pid: than.pid
			}, function(data) {
				var arr = [];
				for (let i in data.cover_list) {
					arr.push({
						image: than.img_pre + data.cover_list[i].url
					})
				}
				than.list = arr;
				than.info = data;
				for (let i in data.attribute_list) {
					than.jsonLength++;
				}
			})
		},
		methods: {
			log() {
				than.pay = true
			},
			back() {
				uni.navigateBack()
			},
			getAttribute(index, a) { //点亮规格，并且获取当前规格的产品信息
				than.specs_arr[index] = a;
				var arr = [];
				var arr2 = [];
				var json = {};
				var ename = "";
				for (let j in than.info.attribute_list) {
					for (let i in than.specs_arr) {
						if (j == i) {
							json[i] = than.specs_arr[i];
							arr2.push(json);
							arr.push(than.specs_arr[i])
						}
					}
				}
				for (let i in arr) {
					ename += arr[i] + "*"
				}
				than.newSpecs_arr = arr2[0]
				ename = ename.substring(0, ename.length - 1);
				for (let b in than.info.specs_list) {
					if (ename === b) {
						than.goods = than.info.specs_list[b]

					}
				}
				than.$forceUpdate();
			},
			toPay() {
				var length = 0
				for (let i in than.specs_arr) {
					length++;
				}
				if (length != than.jsonLength) {
					than.toast("请选择商品属性")
					return false
				}
				if (than.type) {
					than.addShopCart()
				} else {
					than.buy()
				}
			},
			buy() {
				var product_arr = [];
				var json = {};
				json.count = than.count;
				json.pid = than.info.pid;
				json.specs_arr = than.newSpecs_arr;
				product_arr.push(json)
				than.toPage("pay?product_arr=" + JSON.stringify(product_arr) + '&is_car=0' + '&use_score=' + than
					.use_score)
			},
			addShopCart() {
				than.post("api/Product/addShopCart", {
					pid: than.pid,
					count: than.count,
					specs_arr: than.specs_arr
				}, function(data) {
					than.toast(data)
					than.pay = false
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.showcar {
		position: fixed;
		width: 133rpx;
		height: 133rpx;
		bottom: 200rpx;
		right: 16rpx;
		z-index: 10;
	}

	.popup {
		.buttom {
			padding: 40rpx 0;

			.u-button-pay {
				width: 524rpx;
				height: 81rpx;
				border-radius: 41rpx;
				background: #F6642D;
			}

			.u-button-car {
				width: 524rpx;
				height: 81rpx;
				border-radius: 41rpx;
			}
		}

		.up {
			.list {
				margin: 43rpx 0;
				height: 170rpx;
				display: flex;
				align-items: center;
				padding: 0 36rpx;

				.img {
					width: 168rpx;
					height: 168rpx;
				}

				.goods {
					margin-left: 23rpx;
					width: 490rpx;
					height: 100%;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(34, 34, 34, 1);
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}


					.number {
						display: flex;
						align-items: center;
						margin-top: 49rpx;

						.money {
							font-size: 31rpx;
							font-family: PingFang SC;
							font-weight: 500;

							text {
								font-size: 41rpx;
							}

							color:rgba(227, 25, 25, 1);
						}

						.box {
							margin-left: auto;
						}
					}
				}
			}
		}

		.down {
			padding: 0 39rpx;

			.name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(102, 102, 102, 1);
			}

			.cont {
				overflow: hidden;
				padding: 20rpx 0;

				.list {
					margin-right: 36rpx;
					float: left;
					min-width: 100rpx;
					text-align: center;
					line-height: 56rpx;
					height: 56rpx;
					background: rgba(245, 245, 249, 1);
					border-radius: 6rpx;
					padding: 0 25rpx;
					border: 1px solid #FFFFFF;
				}

				.active {
					color: #F6CA51;
					background: #FFFAEE;
					border: 1px solid #F6CA51;
				}

			}
		}
	}

	.bottom {
		height: 126rpx;
		background: #FFFFFF;
    padding: 0 36rpx 0 58rpx;
    border-radius: 70rpx 70rpx 0 0;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-shadow: 0px -3rpx 3rpx 0px rgba(75, 118, 246, 0.08);
		display: flex;
		align-items: center;
    justify-content: space-between;
    .text-box {
      font-size: 30rpx;
      font-width: Bold;
      color: #333333;
      .box-pir {
        margin-left: 17rpx;
        font-size: 43.82rpx;
        font-weight: Regular;
        color: #E31919;
        .number {
          margin-left: 6rpx;
          font-size: 26.05rpx;
          color: #E31919;
        }
      }
    }
		.u-button {
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
      margin-right: 0;
		}
	}

	.evaluate_list {
		display: flex;
		margin-bottom: 30rpx;

		.icon {
			line-height: 46rpx;
			height: 46rpx;
			padding: 0 18rpx;
			border-radius: 22rpx;
			margin-right: 24rpx;
		}
	}

	.div {
		height: 100rpx;
	}

	.content {
		border-bottom: 20rpx solid #F2F5FB;
		padding: 0 37rpx;

		.title {
			height: 100rpx;
			display: flex;
			align-items: center;

			.icon {
				width: 16rpx;
				height: 16rpx;
				background: #E6D197;
				border-radius: 50%;
				margin-right: 8rpx;
				margin-top: 5rpx;
			}

			.name {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}

			.text {
				margin-left: auto;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(102, 102, 102, 1);

				image {
					margin-left: 19rpx;
					width: 14rpx;
					height: 25rpx;
				}
			}
		}

		.tab {
			.titlex {
				height: 105rpx;
				font-size: 36rpx;
				display: flex;
				align-items: center;

				text {
					margin-left: 21rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}

			.list {
				display: flex;

				.head {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.user {
					margin-top: 9rpx;
					margin-left: 20rpx;

					.name {
						font-size: 30rpx;

						text {
							color: #ABB3BA;
							margin-left: 20rpx;
							font-size: 22rpx;
						}
					}

					.text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(102, 102, 102, 1);
					}

					.img {
						padding-top: 30rpx;

						image {
							width: 98rpx;
							height: 98rpx;
							margin: 0 12rpx 12rpx;
						}
					}
				}
			}
		}
	}

	.user {
		border-bottom: 20rpx solid #F2F5FB;
		padding: 0 36rpx;
		height: 172rpx;
		display: flex;
		align-items: center;

		image {
			width: 110rpx;
			height: 110rpx;
		}

		.cont {
			margin-left: 24rpx;

			.name {
				font-size: 42rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}

			.text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(164, 167, 174, 1);
			}
		}

		.icon {
			border-radius: 40rpx;
			line-height: 50rpx;
			height: 50rpx;
			padding: 0 20rpx;
			color: #000000;
			background: #F6CA51;
			margin-left: auto;
		}
	}

	.operation {
		border-bottom: 20rpx solid #F2F5FB;
		padding: 0 36rpx;

		.list {
			height: 112rpx;
			border-bottom: 1px solid #E6E6E6;
			display: flex;
			align-items: center;

			.name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #A9ABB3;
			}

			.cont {
				margin-left: 61rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.text {
				margin-left: auto;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #A9ABB3;
				display: flex;
				align-items: center;

				image {
					margin-left: 21rpx;
					width: 14rpx;
					height: 25rpx;
				}
			}
		}
	}

	.top {
		border-bottom: 20rpx solid #F2F5FB;

		.topImage {
			position: relative;

			.back {
				position: absolute;
				width: 25rpx;
				height: 40rpx;
				z-index: 100;
				left: 20rpx;
				top: 50rpx;
			}
		}

		.down {
			position: relative;
			z-index: 2;
			background: #FFFFFF;
			margin-top: -50rpx;
			border-radius: 70rpx 0px 0px 0px;
			padding-top: 38rpx;

			.title {
				min-height: 112rpx;
				margin: 0 38rpx;
				font-size: 44rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				padding: 0 36rpx;
			}
		}

		.money {
			height: 108rpx;
			display: flex;
			align-items: center;
			padding: 0 36rpx;

			.left {
				font-size: 54rpx;
				font-family: PingFang SC;
				line-height: 1;
				font-weight: bold;
				color: #E31919;

				text {
					font-size: 32rpx;
					margin: 0 10rpx;
				}
			}

			.icon {
				margin-left: 30rpx;
				height: 38rpx;
				background: #F6CA51;
				border-radius: 19rpx;
				padding: 0 17rpx;
				font-size: 17rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);

				text {
					font-size: 26rpx;
				}
			}

			.right {
				margin-left: auto;
				font-size: 26rpx;
				color: #666666;
			}
		}

		.goods_name {
			padding: 0 37rpx;
			font-size: 33rpx;
			font-family: DIN;
			font-weight: 500;
			color: #999999;
		}

		.setect {
			display: flex;
			align-items: center;
			padding: 0 36rpx;
			height: 115rpx;

			.left {
				.list {
					width: 58rpx;
					height: 58rpx;
					background: #FFFFFF;
					border: 2rpx solid #E6E6E6;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.icon {
						width: 42rpx;
						height: 42rpx;
						background: #333333;
						border-radius: 50%;
					}
				}
			}

			.right {
				margin-left: auto;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
	}
</style>
